<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        欢迎界面
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/main.css" media="all">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" href="lib/bootstrap/js/bootstrap.min.js" media="all">
</head>

<body>
    <style type="text/css">
        legend {
            display: block;
            width: 100px;
            border-bottom: 0px;
            font-family: "Microsoft YaHei", "Helvetica Neue";
        }

        legend a {
            color: #666;
        }

        legend a:hover {
            text-decoration: none;
        }

        .layui-table {
            font-family: "Microsoft YaHei", "Helvetica Neue";
        }
    </style>
    <div class="x-body" style="background-color: #f3f3f3; margin: 0;">
        <blockquote class="layui-elem-quote">
            欢迎使用社区物业管理系统！
        </blockquote>
        <div class="row">
            <div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol">
                        <img src="./images/homeIcon1.png" width="71" alt="">
                    </div>
                    <div class="value tab-menu" bind="1">
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总栋数">
                            <span>总栋数</span></a>
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总栋数">
                            <h1>45</h1>
                        </a>
                    </div>
                </section>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol">
                        <img src="./images/homeIcon2.png" width="71" alt="">
                    </div>
                    <div class="value tab-menu" bind="1">
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总户数">
                            <span>总户数</span></a>
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总户数">
                            <h1>600</h1>
                        </a>
                    </div>
                </section>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol">
                        <img src="./images/homeIcon3.png" width="71" alt="">
                    </div>
                    <div class="value tab-menu" bind="1">
                        <a href="javascript:;" data-url="user-info.html" data-parent="true"
                            data-title="总人数"><span>总人数</span></a>
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总人数">
                            <h1>8,310</h1>
                        </a>
                    </div>
                </section>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol">
                        <img src="./images/homeIcon4.png" width="71" alt="">
                    </div>
                    <div class="value tab-menu" bind="1">
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="租户数量">
                            <span>租户数量</span></a>
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="租户数量">
                            <h1>1,314</h1>
                        </a>

                    </div>
                </section>
            </div>

        </div>

        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="default">信息统计</a></legend>
        </fieldset>

        <!--相关统计-->
        <div class="row">
            <div class="col-sm-4">
                <section class="panel">
                    <div class="panel-heading">社区人数 <span style="position: absolute;
                        right: 30px;
                        top: 24px;
                        font-size: 12px;
                        color: #999;
                        font-weight: 400;">社区人数统计(人)</span></div>
                    <div class="panel-body">
                        <div class="echarts" id="area" style="height:300px; height:350px"></div>
                    </div>
                </section>
            </div>
            <div class="col-sm-4">
                <section class="panel">
                    <div class="panel-heading">投诉/满意度 <div class="labelIndexBox"><span
                                class="labelIndexleft">投诉(次)</span> <span class="labelIndexrit">业主满意度</span></div>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="main" style="height:300px; height:350px"></div>
                    </div>
                </section>
            </div>
            <div class="col-sm-4">
                <section class="panel">
                    <div class="panel-heading">社区停车位</div>
                    <div class="panel-body">
                        <div class="echarts" id="years" style="height:300px; height:350px"></div>
                    </div>
                </section>
            </div>

            <script src="lib/layui/layui.js" charset="utf-8"></script>
            <script src="js/jquery.min.js"></script>
            <script src="js/echarts.min.js"></script>
            <!--Vue js脚本-->
            <script src="/js/vue.js" charset="utf-8"></script>
            <!--引入Axios js脚本-->
            <script src="/js/axios.js" charset="utf-8"></script>

            <script type="text/javascript">
                var app = new Vue({
                    el: "#app", //声明当前Vue在页面的作用域
                    data: {
                        checkedIDs: [],
                        houseList: [],
                        total: 10,
                        searchMap: {
                            "ownerName": "",
                            "pageNum": 1,
                            "pageSize": 2
                        },
                    },
                    created: function () { //Vue生命周期方法，加载页面时会执行该方法
                        axios.post("parking/count").then(rsp => {
                            // mainChart(rsp.data.mainData)
                            // areaChart(rsp.data.areaData)
                            yearsChart(rsp.data.yearsData)
                        })
                        //初始页面获取社区列表信息
                    }
                })

                function mainChart(data) {
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据

                    let date = '2020-03-025';
                    option = {

                        tooltip: {
                            trigger: 'axis',
                            backgroundColor: "rgba(255, 255, 255, 1)",
                            textStyle: {
                                color: '#999'
                            },
                            extraCssText: 'box-shadow: 0 0 5px #ccc',
                            formatter(params) {
                                return `<div>${date} <br/>${params[0].seriesName}：${params[0].value}<br/>${params[1].seriesName}：${params[1].value}%</div>`
                            }
                        },
                        // legend: {
                        //     color: ["#13C7F2", "#F9CE81"], 
                        //     data: ['投诉（次）', '业主满意度'],
                        //     icon: 'rect',
                        //     itemWidth: 18,
                        //     itemHeight: 2,
                        //     itemGap: 13,
                        //     right: '4%',
                        //     textStyle: {
                        //         fontSize: 12,
                        //         color: '#23b7e5'
                        //     }
                        // },
                        grid: {
                            top: 'middle',
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            height: '80%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
                                '12月'
                            ],
                            axisLine: {
                                lineStyle: {
                                    color: "#9e9e9e",
                                }
                            },
                            axisLabel: {
                                color: '#9e9e9e',
                                fontWeight: 'bold'
                            },
                            axisTick: {
                                show: false,
                            },
                            axisPointer: {
                                lineStyle: {
                                    color: '#D11F1F'
                                }
                            },
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: '#eeeeee',
                                    width: 1
                                }
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: "#9e9e9e",
                                },
                            },
                            axisLabel: {
                                formatter: '{value}%',
                                fontWeight: 'bold'
                            },
                            splitArea: {
                                show: false
                            },
                        },
                        series: [{
                            name: '投诉（次）',
                            type: 'line',
                            symbol: 'none',
                            // data: [{
                            //         value: 10,
                            //         symbolSize: 10,
                            //         symbol: 'emptyCircle'
                            //     }, 20, 45, 15,
                            //     {
                            //         value: 90,
                            //         symbolSize: 10,
                            //         symbol: 'emptyCircle'
                            //     },
                            //     20, 10, 80, 50,
                            //     {
                            //         value: 90,
                            //         symbolSize: 10,
                            //         symbol: 'emptyCircle'
                            //     },
                            //     10,
                            //     {
                            //         value: 40,
                            //         symbolSize: 10,
                            //         symbol: 'emptyCircle'
                            //     }
                            // ],
                            data: data.data1,
                            color: "#ff7700",
                            lineStyle: {
                                normal: {
                                    width: 2.5,
                                    color: '#ff7700',
                                }
                            },
                            hoverAnimation: false,
                            smooth: true,
                        }, {
                            name: '业主满意度',
                            type: 'line',
                            symbol: 'none',
                            // data: [{
                            //     value: 20,
                            //     symbolSize: 10,
                            //     symbol: 'emptyCircle'
                            // }, 30, 70, 10, {
                            //     value: 50,
                            //     symbolSize: 10,
                            //     symbol: 'emptyCircle'
                            // }, 90, 50, 20, 90, {
                            //     value: 30,
                            //     symbolSize: 10,
                            //     symbol: 'emptyCircle'
                            // }, 50, {
                            //     value: 90,
                            //     symbolSize: 10,
                            //     symbol: 'emptyCircle'
                            // }],
                            data: data.data2,
                            color: "#ffd88d",
                            lineStyle: {
                                normal: {
                                    width: 2.5,
                                    color: '#ffd88d',
                                }
                            },
                            hoverAnimation: false,
                            smooth: true,
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }

                function areaChart(data) {
                    // 指定图表的配置项和数据
                    let myChart = echarts.init(document.getElementById('area'));

                    // 指定图表的配置项和数据
                    let option = {
                        tooltip: {
                            trigger: 'item',
                            backgroundColor: "rgba(255, 255, 255, 1)",
                            textStyle: {
                                color: '#999'
                            },
                            extraCssText: 'box-shadow: 0 0 5px #ccc',
                            formatter: "{a} <br/>{b} : {c} ({d}%)",
                        },
                        itemStyle: {
                            normal: {
                                //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                color: function (params) {
                                    // build a color map as your need.
                                    let colorList = [
                                        "#FA9660", "#F8917E", "#FFD586", "#D68F49", "#DADADA",
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                //以下为是否显示，显示位置和显示格式的设置了
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{b}\n{c}'
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                formatter: "{c} ",
                                textStyle: {
                                    fontSize: this.standSize / 150,
                                    color: "#999"
                                },
                            },
                        },
                        legend: {
                            icon: 'circle',
                            orient: 'vertical',
                            itemWidth: 8,
                            itemHeight: 8,
                            right: 0,
                            bottom: 0,
                            // data: ['A区', 'B区', 'C区', 'D区', 'E区']
                            data: data.names
                        },
                        series: [{
                            name: '社区租户人数',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '40%'],
                            // data: [{
                            //         value: 633,
                            //         name: 'A区'
                            //     },
                            //     {
                            //         value: 431,
                            //         name: 'B区'
                            //     },
                            //     {
                            //         value: 231,
                            //         name: 'C区'
                            //     },
                            //     {
                            //         value: 101,
                            //         name: 'D区'
                            //     },
                            //     {
                            //         value: 81,
                            //         name: 'E区'
                            //     }
                            // ],
                            data: data.values,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    myChart.currentIndex = -1;
                    setInterval(function () {
                        let dataLen = option.series[0].data.length;
                        /*console.log(dataLen);*/
                        // 取消之前高亮的图形
                        myChart.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: myChart.currentIndex
                        });
                        myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
                        // 高亮当前图形
                        myChart.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: myChart.currentIndex
                        });
                    }, 2000);

                    // 使用刚指定的配置项和数据显示图表。
                    /*myChart.setOption(option);*/
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });
                }

                function yearsChart(data) {
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById('years'));
                    //var myChart = echarts.init(document.getElementById('chart2'));
                    // var ydata = [{
                    //         name: 'A区车位',
                    //         value: 18
                    //     },
                    //     {
                    //         name: 'B区车位',
                    //         value: 16
                    //     },
                    //     {
                    //         name: 'C区车位',
                    //         value: 15
                    //     },
                    //     {
                    //         name: 'D区车位',
                    //         value: 14
                    //     },
                    //     {
                    //         name: 'E区车位',
                    //         value: 10
                    //     }
                    // ];
                    let ydata = data.ydata
                    let color = ["#FA9660", "#DADADA", "#FFD586", "#F8917E", "#D68F49"]
                    let xdata = ['A区车位', "B区车位", "C区车位", "D区车位", 'E区车位'];
                    // let xdata = data.xdata
                        

                    option = {
                        /*backgroundColor: "rgba(255,255,255,1)",*/
                        color: color,
                        legend: {
                            icon: "circle",
                            x: "right",
                            right: "10",
                            bottom: "0",
                            data: xdata,
                            itemWidth: 8,
                            itemHeight: 8,
                            textStyle: {
                                color: '#000'
                            },
                            /*itemGap: 16,*/
                            /*formatter:function(name){
                              var oa = option.series[0].data;
                              var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
                              for(var i = 0; i < option.series[0].data.length; i++){
                                  if(name==oa[i].name){
                                      return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
                                  }
                              }
                            }*/
                            formatter: function (name) {
                                return '' + name
                            }
                        },
                        series: [{
                            type: 'pie',
                            clockwise: false, //饼图的扇区是否是顺时针排布
                            minAngle: 2, //最小的扇区角度（0 ~ 360）
                            radius: ["50%", "70%"],
                            center: ["50%", "50%"],
                            avoidLabelOverlap: false,
                            itemStyle: { //图形样式
                                normal: {
                                    borderColor: '#ffffff',
                                    borderWidth: 1,
                                },
                            },

                            label: {
                                normal: {
                                    show: false,
                                    position: 'center',
                                    formatter: '{b}\n{c} ({d}%)',
                                    rich: {
                                        text: {
                                            color: "#fff",
                                            fontSize: 14,
                                            align: 'center',
                                            verticalAlign: 'middle',
                                            padding: 8
                                        },
                                        value: {
                                            color: "#8693F3",
                                            fontSize: 24,
                                            align: 'center',
                                            verticalAlign: 'middle',
                                        },
                                    }
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 24,
                                    }
                                }
                            },
                            data: ydata
                        }]
                    };
                    myChart.setOption(option);
                    myChart.currentIndex = -1;

                    setInterval(function () {
                        let dataLen = option.series[0].data.length;
                        // 取消之前高亮的图形
                        myChart.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: myChart.currentIndex
                        });
                        myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
                        // 高亮当前图形
                        myChart.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: myChart.currentIndex
                        });
                    }, 2000);

                    // 使用刚指定的配置项和数据显示图表。
                    /*myChart.setOption(option);*/
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            </script>


        </div>
        <div class="layui-footer footer footer-demo">
            <div class="layui-main">
                <p>
                    <a href="/">
                        Copyright ©2022 WBU WanQi
                    </a>
                </p>

            </div>
        </div>

</body>

</html>